<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>音乐播放器</title>
<link type="text/css" href="css/jp.css" rel="stylesheet" >
<script src="../jquery-1.4.4.min.js"></script>
<script src="js/jquery.jplayer.min.js"></script>
<style>
	a:focus{ outline:none;}
</style>
<script>
	
	$(document).ready(function() {
		var playItem = 0;
 
		var myPlayList = [
			{name:"Make a secret",mp3:"a.mp3"},
			{name:"Namolla Family - 전화하지마 (Feat. 태인)",mp3:"b.mp3"}
			];
		$("#jpId").jPlayer( { //先要引用存放播放器的层
			ready: function () {//ready属性的设置
				displayPlayList();
				playListInit(false);
			},
			swfPath: "js"
		}).jPlayer("onSoundComplete", function() {
 			playListNext();
		}).jPlayer("onProgressChange", function(lp,ppr,ppa,pt,tt) {
			 $("#totalTime").text($.jPlayer.convertTime(tt));
			 $("#playedTime").text($.jPlayer.convertTime(pt));
		}) ;
		function playListInit(autoplay) {
			if(autoplay) {
				playListChange( playItem );
			} else {
				playListConfig( playItem );
			}
		}
 
		function displayPlayList() {
			$("#jplayer_playlist ul").empty();
			for (i=0; i < myPlayList.length; i++) {
				var listItem = (i == myPlayList.length-1) ? "<li class='jplayer_playlist_item_last'>" : "<li>";
				listItem += "<a href='#' id='jplayer_playlist_item_"+i+"' tabindex='1'>"+ myPlayList[i].name +"</a></li>";
				$("#jplayer_playlist ul").append(listItem);
				$("#jplayer_playlist_item_"+i).data( "index", i ).click( function() {
					var index = $(this).data("index");
					if (playItem != index) {
						playListChange( index );
					} else {
						$("#jpId").jPlayer("play");
					}
					$(this).blur();
					return false;
				});
			}
		}
		function playListConfig( index ) {
			$("#jplayer_playlist_item_"+playItem).removeClass("jplayer_playlist_current").parent().removeClass("jplayer_playlist_current");
			$("#jplayer_playlist_item_"+index).addClass("jplayer_playlist_current").parent().addClass("jplayer_playlist_current");
			playItem = index;
			$("#jpId").jPlayer("setFile", myPlayList[playItem].mp3, myPlayList[playItem].ogg);
		}
 
		function playListChange( index ) {
			playListConfig( index );
			$("#jpId").jPlayer("play");
		}
		function playListNext() {
			var index = (playItem+1 < myPlayList.length) ? playItem+1 : 0;
				playListChange( index );
		}
	 
		function playListPrev() {
			var index = (playItem-1 >= 0) ? playItem-1 : myPlayList.length-1;
			playListChange( index );
		}
		$("#jplayer_previous").click( function() {
			playListPrev();
			$(this).blur();
			return false;
		});
	 
		$("#jplayer_next").click( function() {
			playListNext();
			$(this).blur();
			return false;
		});
		$("#minimum").css({cursor:"pointer"})
			.click(function(){
				$('#jplayer_playlist').hide();
			})
		
	});

</script>

</head>
<body>
<div id="jpId"></div>
<div class="jp-playlist-player">
  <div class="jp-interface">
    <ul class="jp-controls">
      <li><a href="#" id="jplayer_play" class="jp-play" tabindex="1">play</a></li>
      <li><a href="#" id="jplayer_pause" class="jp-pause" tabindex="1">pause</a></li>
      <li><a href="#" id="jplayer_stop" class="jp-stop" tabindex="1">stop</a></li>
      <li><a href="#" id="jplayer_volume_min" class="jp-volume-min" tabindex="1">min volume</a></li>
      <li><a href="#" id="jplayer_volume_max" class="jp-volume-max" tabindex="1">max volume</a></li>
      <li><a href="#" id="jplayer_previous" class="jp-previous" tabindex="1">previous</a></li>
      <li><a href="#" id="jplayer_next" class="jp-next" tabindex="1">next</a></li>
	  <li id="minimum">-</li>
    </ul>
    <div class="jp-progress">
      <div id="jplayer_load_bar" class="jp-load-bar">
        <div id="jplayer_play_bar" class="jp-play-bar"></div>
      </div>
    </div>
    <div id="jplayer_volume_bar" class="jp-volume-bar">
      <div id="jplayer_volume_bar_value" class="jp-volume-bar-value"></div>
    </div>
    <div id="jplayer_play_time" class="jp-play-time"></div>
    <div id="jplayer_total_time" class="jp-total-time"></div>
  </div>
  <div id="jplayer_playlist" class="jp-playlist">
    <ul>
      <!-- The function displayPlayList() uses this unordered list -->
      
    </ul>
  </div>
</div>

</body>
</html>